<template>
	<view class="record flex-grow-1">
		<view class="list" v-if="list.length">
			<view
				class="item"
				v-for="item in list"
				:key="item.id"
			>
				<view class="flex-between">
					<view class="section">{{ item.section }}</view>
					<view class="flex-align">
						<u-avatar size="50rpx"></u-avatar>
						<view class="instructor">
							{{ item.instructor }}
						</view>
					</view>
				</view>
				
				<view class="date text-center">{{ item.date }}</view>	
				
				<view class="flex-align">
					<u-icon name="map-fill" color="#3b68ee"></u-icon>
					<uni-icons type></uni-icons>
					<view class="address">
						{{ item.address }}
					</view>
				</view>
			</view>
		</view>
		
		<u-empty v-else text="暂无数据" icon="https://sass-test.doit10019.com/upload/202501/08114139-33838600519097990.jpg?attname=coupon.jpg" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					id: 1,
					section: '第三课时:呼吸练习',
					date: '2020/07/10 10:32:12',
					address: '大连体育馆第一泳池',
					instructor: '李教练'
				},
				{
					id: 2,
					section: '第三课时:呼吸练习',
					date: '2020/07/10 10:32:12',
					address: '大连体育馆第一泳池',
					instructor: '李教练'
				}
			],
		}
	},
}
</script>

<style lang="scss" scoped>
.record {
	background-color: #F3F3F3;
	padding: 20rpx 30rpx;
	
	.list {
		color: #333;
		
		.item {
			border-radius: 20rpx;
			background: #fff;
			padding: 20rpx 30rpx;
			
			& + .item {
				margin-top: 20rpx;
			}
		}
		
		.section {
			background-color: rgba(85, 190, 243, 0.1);
			border-radius: 21rpx;
			padding: 9rpx 22rpx;
			font-size: 28rpx;
		}
		
		.instructor {
			font-size: 24rpx;
			margin-left: 20rpx;
		}
		
		.date {
			margin: 60rpx 0 50rpx;
		}
		
		.address {
			font-size: 24rpx;
			margin-left: 23rpx;
		}
	}
}
</style>
